<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>复合选择器</title>
  <style>
      div, span {
          /*复合*/
          font-weight: bold;
          font-size: 30px;
      }
      .box1 span {
          /*后代*/
          color: red;
      }

      .box1 > span {
          /*子元素*/
          color: blue;
      }

      .box2 + span {
          /* 后面一个兄弟元素 */
          color: #bfa;
      }

      .box2 ~ span {
          /* 后面所有兄弟元素*/
          color: pink;
      }

  </style>
</head>
<body>
<!--复合选择器: 父子 兄弟 祖先 后代-->
<div class="box1">
  box1 inner text
  <span>this is span</span>
  <div class="box2">
    <span>box2 inner span</span>
  </div>
  <span>next brother</span>
  <span>next brother2</span>
</div>
</body>
</html>